<template>
  <div class="container">
    <nav_bar title='个人中心' background='#fff' ></nav_bar>
    <div class="header">
          <img :src="photo_url" mode="aspectFill">
          <div v-if="!noLoginFlag">{{real_name}}</div>
          <!-- <div>{{tel?tel:''}}</div> -->
          <div class="navigator_wrapper" v-if="noLoginFlag">
            <navigator url="/pages/login/main">登录/注册</navigator>
          </div>
          <!--<div class="navigator_wrapper" v-if="noBindingFlag">
            <navigator url="/pages/register/main">点击绑定手机</navigator>
          </div>-->
    </div>
    <ul class="details">
      <li>
        <button v-if="noLoginFlag" @click="goToLogin">
          <img src="../../../static/images/icon/bind_phone.png" alt="">
          <span class="details_title">绑定手机</span>
          <span class="right" :class="{'no_bind_tel':!tel}">{{tel?tel:'授权'}}</span>
        </button>
        <button v-if="!noLoginFlag" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
          <img src="../../../static/images/icon/bind_phone.png" alt="">
          <span class="details_title">绑定手机</span>
          <span class="right" :class="{'no_bind_tel':!tel}">{{tel?tel:'授权'}}</span>
        </button>
      </li>
      <li>
        <navigator :url="noLoginFlag?'/pages/login/main':'/pages/personInfo/main'">
          <img src="../../../static/images/icon/person_info.png" alt="">
          <span class="details_title">个人资料</span>
          <span class="right">
            <img src="../../../static/images/icon/arrowR.png" />
          </span>
        </navigator>
      </li>
      <div class="divider"></div>
      <li>
        <navigator :url="noLoginFlag?'/pages/login/main':'/pages/projectList/main'">
        <img src="../../../static/images/icon/my_pro.png" alt="">
          <span class="details_title">我的项目</span>
          <span class="right">
            <img src="../../../static/images/icon/arrowR.png" />
          </span>
        </navigator>
      </li>
      <div class="divider"></div>
      <li v-if="is_useTip_show">
        <navigator url="/pages/useTip/main">
          <img src="../../../static/images/icon/use_tip.png" alt="">
          <span class="details_title">使用指南</span>
          <span class="right">
            <img src="../../../static/images/icon/arrowR.png" />
          </span>
        </navigator>
      </li>
      <li>
        <button open-type="contact">
          <img src="../../../static/images/icon/contact_custom.png" alt="">
          <span class="details_title">联系客服</span>
          <span class="right">
            <img src="../../../static/images/icon/arrowR.png" />
          </span>
        </button>
      </li>
      <li v-if="is_aboutUs_show">
        <navigator url="/pages/aboutUs/main">
          <img src="../../../static/images/icon/about_us.png" alt="">
          <span class="details_title">关于我们</span>
          <span class="right">
            <img src="../../../static/images/icon/arrowR.png" />
          </span>
        </navigator>
      </li>
      <li style="margin-top: auto;">
        <div class="logo">
          <img src="../../../static/images/icon/logo.png" alt="">
          <span class="details_titles">一拍即点</span>
        </div>
      </li>
      <!-- <li>
        <navigator url="/pages/orderList/main">
          <img src="../../../static/images/icon/menu.png" alt="">
          <span class="details_title">我的订单</span>
        </navigator>
      </li> -->
      <!-- <li>
        <navigator url="/pages/draftsList/main?type=draft_box">
          <img src="../../../static/images/icon/drafList.png" alt="">
          <span class="details_title">草稿箱</span>
        </navigator>
      </li> -->
      <!-- <li>
        <navigator url="/pages/vip/main">
          <img src="../../../static/images/icon/vip1.png" alt="">
          <span class="details_title">VIP</span>
          <div class="vip_wrapper">
            <div class="details_content" v-for="(item,index) of vipList" :key="index">
            {{item.type=='num'?'可用张数'+item.free_num:'会员到期时间'+item.end_time}}
          </div>
          </div>
        </navigator>
      </li> -->
      <!-- <li>
        <navigator url="/pages/billList/main">
          <img src="../../../static/images/icon/ticket.png" alt="">
          <span class="details_title">发票抬头</span>
        </navigator>
      </li> -->
    </ul>
  </div>
</template>

<script>

export default {
  data () {
    return {
      photo_url:"http://file.rzkeji.com/web/recruit/icon/default.png",//个人头像
      real_name:"",//个人姓名
      tel:"",   //个人电话
      vipList:'',//vip信息
      noBindingFlag:'',//未绑定手机
      noLoginFlag: true,//未登录
      is_aboutUs_show: true,
      is_useTip_show: true
    }
  },


  methods: {
    async register(phone){
      var userToken=wx.getStorageSync('userToken')
      let res=await this.$request.postData('/auth/bindingPhone',{phone:phone,user_token:userToken});
      if(res.data.level=="success"){
        // wx.setStorageSync('userToken',res.data.data);
        // this.$currency.switchTab('/pages/home/main')
        this.$currency.showToast(res.data.message,'success',3000);
        let _this = this;
        setTimeout(function () {
          _this.getUserInfo();
        },3000)

      }else{
        this.$currency.showToast(res.data.message,'none',3000)
        let _this = this;
        setTimeout(function () {
          _this.getUserInfo();
        },3000)
      }
    },
    goToLogin() {
      let userToken=wx.getStorageSync('userToken');
      if(!userToken){//如果没有的登陆的话
        this.$currency.navigateTo('/pages/login/main')
        return;
      }
    },
    getPhoneNumber(e){
      if(!this.tel){
        const _this=this
        console.log(e)
        if (e.target.errMsg == 'getPhoneNumber:ok') {
          wx.checkSession({
            async fail(){
              // const ask= await _this.sendWxCode()
              wx.login({
                success: async function(e){
                  const code=e.code;
                  var userToken=wx.getStorageSync('userToken')
                  const res=await _this.$request.postData('/auth/getWeChatPhone',{
                    user_token:userToken,
                    iv:e.mp.detail.iv,
                    encryptedData:e.mp.detail.encryptedData,
                    code:code
                  })
                  if(res.data.level=='success'){
                    _this.register(JSON.parse(res.data.data).phoneNumber);
                  }else{
                    _this.$currency.showToast(res.data.message,'none',3000)
                  }

                },
                fail(e){
                  console.log(e);
                }
              })
            },
            success:async function(){
              var userToken=wx.getStorageSync('userToken')
              const res=await _this.$request.postData('/auth/getWeChatPhone',{
                user_token:userToken,
                iv:e.mp.detail.iv,
                encryptedData:e.mp.detail.encryptedData
              })
              if(res.data.level=='success'){
                _this.register(JSON.parse(res.data.data).phoneNumber);
              }else{
                _this.showToast(res.data.message)
              }
            }
          })
        }
      }
    },
    async getUserInfo(){
      var userToken=wx.getStorageSync('userToken')
      let res=await this.$request.getData('/ucenter/getUserInfo',{user_token:userToken})
        if(res.data.data instanceof Object){
        this.photo_url=res.data.data.user_info.photo_url
        this.real_name=res.data.data.user_info.nickname
        this.tel=res.data.data.phone
        this.resumeId=res.data.data.id
        this.resumeTop=res.data.data.set_top
        this.vipList=res.data.data.user_vip_list
        this.noLoginFlag=false;
        this.noBindingFlag=false;
        }else if(res.data.level=='error'){
          if(res.data.data=='no_login'){
            this.noLoginFlag=true;
          }else if(res.data.data=='no_binding'){
            this.noBindingFlag=true;
          }
      }
    },
    async getUseGuide(){
      let res=await this.$request.getData('/auth/getUseGuide',{});
      if (res.data.level == 'success'){
         if (res.data.data == null){
           this.is_useTip_show = false;
         }else {
           this.is_useTip_show = true;
         }
      }
    },
    async getAboutUs(){
      let res=await this.$request.getData('/auth/getAboutUs',{});
      if (res.data.level == 'success'){
        if (res.data.data == null){
          this.is_aboutUs_show = false;
        }else {
          this.is_aboutUs_show = true;
        }
      }
    },
  },
  onShow(){
    let userToken=wx.getStorageSync('userToken');
    if(!userToken){//如果没有的登陆的话
      this.noLoginFlag = true;
    }else {
      if(this.noLoginFlag){
        this.getUserInfo()
      }
      if(!this.tel){
        this.getUserInfo()
      }
      this.noLoginFlag = false;
    }
    /*this.getUseGuide();
    this.getAboutUs();*/
  }
}
</script>

<style scoped lang="scss">
  .container{
    /*padding:10px;*/
    .header{
      height: 200px;
      width:100%;
      display:flex;
      flex-wrap: wrap;
      justify-content: center;
      align-content: flex-start;
      /*background-color: rgba(242, 139, 0,0.3) !important;*/
      background-image: url("http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/steel/icon/top-bg.png");
      background-size: 100%;
      background-repeat: no-repeat;
      margin-bottom: -50px;
      img{
        width:70px;
        height: 70px;
        border-radius: 50%;
        margin-top: 25px;
      }
      div{
        margin:10px 0;
        width:100%;
        height: 20px;
        line-height: 20px;
        text-align: center;
        color: #fff;
        font-size: 16px;
      }
      navigator{
        /*border:1px solid #eee;*/
        padding:5px;
      }
    }
    .navigator_wrapper{
      display: flex;
      justify-content: center;
    }

    //列表各项
    .details{
      border-radius: 16px 16px 0 0;
      padding: 15px 0px 15px 0px;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      min-height: calc(100vh - 290px);
      li{
        padding:10px 0;
        width: 100%;
        /*border-bottom: 1px solid #eee;*/
        .details_title{
          width: 120px;
          display: inline-block;
          font-size: 18px;
        }
      }
    }
    button{
      background: none;
      border: none;
      text-align: left;
      /*padding: 0;*/
      padding: 0 15px;
      color: #666666;
      font-size: 15px;
      display:flex;
      align-items: center;
      line-height: 30px;
      height: 30px;
      width: 100%;
      img{
        width:20px;
        height: 20px;
        margin-right: 20px;
      }
    }
    button::after{
      border: none;
    }
    button:active{
      background-color: rgba(0,0,0,.1);
      opacity: .7;
      border-radius: 0;
    }
    navigator{
      display:flex;
      align-items: center;
      padding: 0 15px;
      img{
          width:20px;
          height: 20px;
          margin-right: 20px;
        }
      .vip_wrapper{
        div{
          margin-bottom: 10px;
        }
      }
    }
    .logo{
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      img{
        width: 20px;
        height: 20px;
      }
      .details_titles{
        font-size: 10px;
        text-align: center;
        color: #888888;
      }
    }
    .right{
      margin-left: auto;
      font-size: 12px;
      color: #aaa;
      align-items: center;
      display: flex;
      img{
        width: 30px;
        height: 30px;
        margin-right: 0;
      }
    }
    .no_bind_tel{
      width: 30px;
      color: #84bd00;
    }
    .divider{
      width: 100%;
      height: 5px;
      background: #f4f4f4;
    }
  }
</style>
